<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>人人汽车网</title>
    <link rel="icon" href="../src/icon/favicon.png" type="image/x-icon" />
    <link rel="stylesheet" href="../src/css/general.css" />
    <link
      href="../node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="../node_modules/swiper/swiper-bundle.min.css"
    />
    <link rel="stylesheet" href="../src/css/bycar.css" />
    <link rel="stylesheet" href="../src/css/queries.css" />
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script
      type="module"
      defer
      src="../node_modules/bootstrap/dist/js/bootstrap.min.js"
    ></script>
  </head>
  <body>
    <main class="main">
      <div class="linear-bac"></div>
      <section class="search-section">
        <div class="search-box">
          <img class="search-icon" src="../src/icon/function01.png" alt="" />
          <input class="search-input" type="text" placeholder="搜索车型" />
          <img
            class="notify-icon"
            src="../src/icon/function02-white.png"
            alt=""
          />
        </div>
      </section>
      <section class="carousel-section">
        <div
          id="carouselExampleCaptions"
          class="carousel slide"
          data-ride="carousel"
        >
          <ol class="carousel-indicators">
            <li
              data-target="#carouselExampleCaptions"
              data-slide-to="0"
              class="active"
            ></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
            <li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="../src/img/car05.png" class="d-block" alt="..." />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">全新升级 全新一代</h5>
                  <p class="carousel-text">全新车型8折起</p>
                  <div class="carousel-time">
                    <span>了解详情</span>
                    <span class="carousel-right"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="../src/img/car05.png" class="d-block" alt="..." />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">全新升级 全新一代</h5>
                  <p class="carousel-text">全新车型8折起</p>
                  <div class="carousel-time">
                    <span>了解详情</span>
                    <span class="carousel-right"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="../src/img/car05.png" class="d-block" alt="..." />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">全新升级 全新一代</h5>
                  <p class="carousel-text">全新车型8折起</p>
                  <div class="carousel-time">
                    <span>了解详情</span>
                    <span class="carousel-right"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="../src/img/car05.png" class="d-block" alt="..." />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">全新升级 全新一代</h5>
                  <p class="carousel-text">全新车型8折起</p>
                  <div class="carousel-time">
                    <span>了解详情</span>
                    <span class="carousel-right"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <img src="../src/img/car05.png" class="d-block" alt="..." />
              <div class="carousel-caption carousel-caption-self d-md-block">
                <div class="caption-self-box">
                  <h5 class="carousel-title">全新升级 全新一代</h5>
                  <p class="carousel-text">全新车型8折起</p>
                  <div class="carousel-time">
                    <span>了解详情</span>
                    <span class="carousel-right"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section class="king-section">
        <div class="kings-box">
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="../src/icon/king11.png" alt="" />
            </div>
            <span class="king-text">超值好物</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="../src/icon/king12.png" alt="" />
            </div>
            <span class="king-text">VR看车</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="../src/icon/king13.png" alt="" />
            </div>
            <span class="king-text">热销SUV</span>
          </div>
          <div class="king-item">
            <div class="king-icon-box">
              <img class="king-icon" src="../src/icon/king14.png" alt="" />
            </div>
            <span class="king-text">计算器</span>
          </div>
        </div>
      </section>
      <section class="pulldown-section">
        <div class="pulldown-box">
          <div class="pulldown-item">
            <select name="" id="">
              <option value="">智能排序</option>
            </select>
          </div>
          <div class="pulldown-item">
            <select name="" id="">
              <option value="">品牌</option>
            </select>
          </div>
          <div class="pulldown-item">
            <select name="" id="">
              <option value="">车价</option>
            </select>
          </div>
          <div class="pulldown-item">
            <select name="" id="">
              <option value="">筛选</option>
            </select>
          </div>
        </div>
      </section>
      <section class="car-Slider-section">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="../src/img/car07.png" alt="" />
              <p>三厢轿车</p>
            </div>
            <div class="swiper-slide">
              <img src="../src/img/car08.png" alt="" />
              <p>两厢轿车</p>
            </div>
            <div class="swiper-slide">
              <img src="../src/img/car09.png" alt="" />
              <p>SUV</p>
            </div>
            <div class="swiper-slide">
              <img src="../src/img/car07.png" alt="" />
              <p>三厢轿车</p>
            </div>
            <div class="swiper-slide">
              <img src="../src/img/car08.png" alt="" />
              <p>两厢轿车</p>
            </div>
            <div class="swiper-slide">
              <img src="../src/img/car09.png" alt="" />
              <p>SUV</p>
            </div>
          </div>
        </div>
      </section>
      <section class="hot-car-section">
        <div class="hot-car-box">
          <div class="hot-car-item">
            <img class="hot-car-img" src="../src/img/car05.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">588ku 2019款 3.0T 自动</p>
              <p class="hot-cat-version">天窗版</p>
              <p class="hot-cat-man-price">厂商指导价: 13.05万</p>
              <p class="hot-cat-money">
                首付 <span class="price">5000</span>元
              </p>
            </div>
          </div>
          <div class="hot-car-item">
            <img class="hot-car-img" src="../src/img/car05.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">588ku 2019款 3.0T 自动</p>
              <p class="hot-cat-version">天窗版</p>
              <p class="hot-cat-man-price">厂商指导价: 13.05万</p>
              <p class="hot-cat-money">
                首付 <span class="price">5000</span>元
              </p>
            </div>
          </div>
          <div class="hot-car-item">
            <img class="hot-car-img" src="../src/img/car05.png" alt="" />
            <div class="hot-cat-text-box">
              <p class="hot-cat-text">588ku 2019款 3.0T 自动</p>
              <p class="hot-cat-version">天窗版</p>
              <p class="hot-cat-man-price">厂商指导价: 13.05万</p>
              <p class="hot-cat-money">
                首付 <span class="price">5000</span>元
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
    <nav class="nav-section">
      <div class="nav-box">
        <a class="goto-view" href="../index.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img class="nav-img" src="../src/icon/function08.png" alt="" />
            </div>
            <span class="nav-text">首页</span>
          </div>
        </a>
        <a class="goto-view nav-item--active" href="views/bycat.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img
                class="nav-img"
                src="../src/icon/function05-active.png"
                alt=""
              />
            </div>
            <span class="nav-text">买车</span>
          </div>
        </a>
        <a class="goto-view" href="views/bycat.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img class="nav-img" src="../src/icon/function05.png" alt="" />
            </div>
            <span class="nav-text">租车</span>
          </div>
        </a>
        <a class="goto-view" href="views/bycat.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img class="nav-img" src="../src/icon/function05.png" alt="" />
            </div>
            <span class="nav-text">卖车</span>
          </div>
        </a>
        <a class="goto-view" href="views/bycat.html">
          <div class="nav-item">
            <div class="nav-img-box">
              <img class="nav-img" src="../src/icon/function05.png" alt="" />
            </div>
            <span class="nav-text">我的</span>
          </div>
        </a>
      </div>
    </nav>
    <!-- Swiper JS -->
    <script src="../node_modules/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        spaceBetween: 30,
        freeMode: true,
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        // },
      });
    </script>
  </body>
</html>
